
import Taro, {Component} from '@tarojs/taro'
import {View, Button, Input, Textarea, Form} from '@tarojs/components'

import {inject, observer} from '@tarojs/mobx'
import {getRuntime, servicePhoneNumber} from "../../utils/common";

import './applyTax.less'
import PickerArea from "../../components/PickerArea";

import {IStoreProps} from '../../store/Stores'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {
  state = {
    area: '',

    orderId: '', // 订单id ,
    shippingType: 0, // 送货方式 （0：3小时快速达，1：1小时极速达（加急费￥10），2：到店自取） (0 = Post3H , 1 = Post1H , 2 = Get ) = ['0', '1', '2'],
    receiver: '', // 收货人 ,
    receiverPhone: '', // 收货人电话 ,
    receiverAddress: '', // 收货人地址 ,
    postalCode: '', // 邮政编码
    taxType: 1, // 税票类型, 1表示申请打印版税票，公司代为打印寄出，在线支付邮寄费； 2表示申请原版税票，由税局寄出，货到付款

    freight: 6
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '申请纸质税票'})
    let orderId = this.$router.params.orderId
    if(!orderId) {
      getRuntime().showToast('订单号不存在~')
      setTimeout(() => { getRuntime().navigateBack() }, 1000)
      return
    }
    this.setState({ orderId })
    this.getFreight()
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  // 获取快递费
  getFreight() {
    let { homeStore } = this.props.stores
    homeStore.getFreight({
      callback: res => {
        this.setState({ freight: res || 6 })
      }
    })
  }

  clickRadio = (field: string, val: number) => {
    this.setState({ [field]: val })
  }

  submit(e) {
    let { orderId, shippingType, area, taxType } = this.state
    let { receiver, receiverPhone, infoAddress, mark } = e.detail.value
    let receiverAddress = area + '&&' + infoAddress
    if(!receiver) { getRuntime().showToast('请填写联系人~'); return }
    if(!receiverPhone) { getRuntime().showToast('请填写手机号码~'); return }
    if(!area) { getRuntime().showToast('请选择收货地址~'); return }
    if(!infoAddress) { getRuntime().showToast('请填写详细地址~'); return }
    let form = {
        orderId: orderId,
        shippingType,
        receiver,
        receiverPhone,
        receiverAddress,
        postalCode: '530000',
        mailType: taxType,
        remarks: mark,
      }
    let { declareTaxStore } = this.props.stores
    declareTaxStore.setCarTaxOrderAddress({
      form,
      callback: res => {
        if(taxType === 1){
          if(!res.payParams){ getRuntime().showToast('系统错误，请稍后重试~'); return false; }
          getRuntime().wxPay(JSON.parse(res.payParams), () => {
            // 支付成功
            getRuntime().setStorage('applyTaxInfo', form)
            getRuntime().navigateTo('/pages/order/applySuccess')
          })
        }else {
          getRuntime().setStorage('applyTaxInfo', form)
          getRuntime().navigateTo('/pages/order/applySuccess')
        }
      }
    })
  }

  pickerArea(res) {
    this.setState({
      area: res.province.label+res.city.label+res.distract.label
    })
  }

  makePhone() {
    getRuntime().makePhoneCall(servicePhoneNumber)
  }


  render() {
    let { isComplete,freight, taxType } = this.state
    return (
      <View className='apply-tax'>
        <View className='form-wrap'>
          <Form onSubmit={this.submit.bind(this)} >
            <View className='content-30'>
              {/*输入框*/}
              <View className='form-wrap__group'>
                <View className='form-wrap__title'>联系人姓名</View>
                <View className='form-wrap__content'>
                  <Input className='input' name='receiver' placeholderClass='placeholder-class' placeholder='请输入联系人姓名'/>
                </View>
              </View>

              <View className='form-wrap__group'>
                <View className='form-wrap__title'>手机号码</View>
                <View className='form-wrap__content'>
                  <Input className='input' name='receiverPhone' type='number' maxLength={11} placeholderClass='placeholder-class' placeholder='请输入手机号码' />
                </View>
              </View>

              {/*省市区选择器*/}
              <View className='form-wrap__group'>
                <View className='form-wrap__title'>省/市/区</View>
                <PickerArea onPicketArea={this.pickerArea.bind(this)} />
              </View>

              <View className='form-wrap__group'>
                <View className='form-wrap__title'>详细地址</View>
                <View className='form-wrap__content'>
                  <Input className='input' name='infoAddress' placeholderClass='placeholder-class' placeholder='请输入详细地址' />
                </View>
              </View>

              <View className='form-wrap__group'>
                <View className='form-wrap__title'>税票类型</View>
                <View className='form-wrap__content form-wrap__radio' style={{flexDirection: 'column'}}>
                  <View className={taxType === 1 ? 'radio radio-active' : 'radio'} onClick={this.clickRadio.bind(this, 'taxType', 1)}>
                    电子版税票打印寄出，在线支付邮寄费用
                  </View>
                  <View className={taxType === 2 ? 'radio radio-active' : 'radio'} onClick={this.clickRadio.bind(this, 'taxType', 2)}>
                    税局原件税票，由税局寄出，货到付款
                  </View>
                </View>
              </View>

              {/*备注框*/}
              <View className='form-wrap__group form-wrap__mark bbnone'>
                <Textarea className='textarea' value='' placeholder='请输入相关备注信息(选填)' name='mark' placeholderClass='placeholder-class' />
              </View>
            </View>

            <View className='tip tip-title'>服务说明</View>
            <View className='tip font-dark'>1、申请电子版打印税票需要支付{freight}元快递费, 付费成功后会自动提交你的收货地址信息!</View>
            <View className='tip font-dark'>2、申请原件税票由税局寄出, 货到付款!</View>
            <View className='tip font-dark' onClick={this.makePhone.bind(this)}>3、有任何疑问请咨询客服{servicePhoneNumber} !</View>
            <Button className='page-submit' formType='submit'>立即申请</Button>
          </Form>
        </View>

        <View className='footer-block' />
        <View className='footer-block' />

      </View>
    )
  }
}

export default Index
